﻿<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>设置数据审核规则</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- #CSS Links -->
    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.css">

    <!-- SmartAdmin Styles : Caution! DO NOT change the order -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production-plugins.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

    <!-- SmartAdmin RTL Support -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.css">

    <!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">

    <!-- #FAVICONS -->
    <link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon/favicon.ico" type="image/x-icon">

    <!-- #GOOGLE FONT -->
    <link rel="stylesheet" href="css/open-sans.css" type="text/css">

    <!-- #APP SCREEN / ICONS -->
    <link rel="apple-touch-icon" href="img/splash/sptouch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="img/splash/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="img/splash/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="img/splash/touch-icon-ipad-retina.png">

    <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="screen and (max-device-width: 320px)">
    <link href="appcss/Common.css" rel="stylesheet" />


</head>
<body class="desktop-detected minified">

    <!-- #MAIN PANEL -->
    <div id="main" role="main">

        <!-- RIBBON -->
        <div id="ribbon">

            <span class="ribbon-button-alignment">
                <span class="btn btn-ribbon"><i class="fa fa-home"></i></span>
            </span>

            <!-- breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="DataApprovalRuleManagement.html">数据审核规则管理</a></li>
                <li>设置数据审核规则</li>
            </ol>
            <!-- end breadcrumb -->

        </div>
        <!-- END RIBBON -->


        <!-- MAIN CONTENT -->
        <div id="content">
            <div class="row hidden">
                <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
                    <h1 class="page-title txt-color-blueDark">
                        <i class="fa fa-edit fa-fw "></i>
                        主页
            <span>> 设置数据审核规则
            </span>
                    </h1>
                </div>

            </div>

            <!-- widget grid -->
            <section id="widget-grid" class="">

                <!-- row -->
                <div class="row">

                    <!-- NEW WIDGET START -->


                    <!-- NEW WIDGET START -->
                    <article class="col-xs-12 col-sm-6 col-md-6 col-lg-6 sortable-grid ui-sortable">

                        <!-- Widget ID (each widget will need unique ID)-->
                        <div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false"
                            data-widget-editbutton="false">
                            <!-- widget options:
                                usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                                data-widget-colorbutton="false"
                                data-widget-editbutton="false"
                                data-widget-togglebutton="false"
                                data-widget-deletebutton="false"
                                data-widget-fullscreenbutton="false"
                                data-widget-custombutton="false"
                                data-widget-collapsed="true"
                                data-widget-sortable="false"

                                -->
                            <header>
                                <h2>设置数据审核规则
                                </h2>

                            </header>

                            <!-- widget div-->
                            <div>

                                <!-- widget edit box -->
                                <div class="jarviswidget-editbox">
                                    <!-- This area used as dropdown edit box -->

                                </div>
                                <!-- end widget edit box -->

                                <!-- widget content -->
                                <div class="widget-body no-padding">
                                    <!-- Success states for elements -->
                                    <form action="#" class="smart-form" id="Update-Form">
                                        <header>填写相关信息</header>
                                        <fieldset>
                                            <section>
                                                <label class="label">名称</label>
                                                <label class="input">
                                                    <input type="text" name="Caption" class="required" id="Caption" value="rul1" />
                                                </label>
                                            </section>

                                        </fieldset>
                                        <fieldset>
                                            <section>
                                                <label class="label">类型(不能修改为插件类型，如需修改请删除后新建)</label>

                                                <div class="inline-group">
                                                    <label class="radio ">
                                                        <input type="radio" data-type="Script" value="1" class="ServiceType"
                                                            name="ServiceType" />
                                                        <i></i>脚本
                                                    </label>
                                                    <label class="radio ">
                                                        <input type="radio" data-type="Proc" value="3" class="ServiceType"
                                                            name="ServiceType" />
                                                        <i></i>存储过程</label>
                                                    <label class="radio">
                                                        <input type="radio" data-type="PlugIn" disabled="disabled" value="2" class="ServiceType"
                                                            name="ServiceType" />
                                                        <i></i>扩展代码</label>
                                                    <input type="hidden" id="ServiceTypeInput" value="" />
                                                </div>
                                            </section>
                                        </fieldset>
                                        <fieldset id="Script" class="serviceoption" style="display: none;">
                                            <section>
                                                <label class="label">表达式</label>
                                                <label class="input">
                                                    <i class="icon-append fa fa-question-circle"></i>
                                                    <input type="text" id="ScriptVal" class="optioninput Scriptinput required" name="ScriptVal" />
                                                    <b class="tooltip tooltip-right">
                                                        <i class="fa fa-warning txt-color-teal"></i>
                                                        数据审核脚本规则:<br />
                                                        通过表达式 “data.Get($column)” 获取数据行中具体列的值。<br />
                                                        $column:列的名称（字符串）。<br />
                                                        然后通过计算和比较来设置审核规则。<br />
                                                        例如:(data.Get(‘c1’)+data.Get(‘c2’)) / 100 > 0.1
                                                    </b>
                                                </label>
                                            </section>

                                        </fieldset>
                                        <fieldset id="Proc" class="serviceoption" style="display: none;">
                                            <section id="everyear">
                                                <label class="label">存储过程</label>
                                                <label class="input">
                                                    <i class="icon-append fa fa-question-circle"></i>
                                                    <input type="text" id="ProcVal" class="optioninput Procinput" name="ProctVal" />
                                                </label>
                                            </section>
                                            <section>
                                                <label class="label">参数</label>
                                                <div>
                                                    <a class="btn btn-default" href="javascript:void(0);" onclick="AddData()"
                                                        style="padding: 6px 12px !important;">新增</a>
                                                </div>
                                            </section>
                                            <section>

                                                <table class="table table-bordered  table-hover smart-form" id="table-parameters">
                                                    <thead>
                                                        <tr>
                                                            <th>名称</th>
                                                            <th>列</th>
                                                            <th>操作</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </section>
                                        </fieldset>
                                        <fieldset id="PlugIn" class="serviceoption" style="display: none;">
                                            <section>
                                                <label class="label">程序集</label>
                                                <label class="input">
                                                    <input type="text" id="Condition" disabled="disabled" name="Condition" />
                                                </label>
                                            </section>
                                            <section>
                                                <table class="table table-bordered  table-hover smart-form"
                                                    id="table-assembly" style="width: 30%;">
                                                    <thead>
                                                        <tr>
                                                            <th>程序集</th>
                                                            <th>版本</th>
                                                            <th>备注</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </section>
                                            <section id="Section1" style="display: none">
                                                <label class="label">类型</label>
                                                <table class="table table-bordered  table-hover smart-form"
                                                    id="table-plugin" style="width: 30%;">
                                                    <thead>
                                                        <tr>
                                                            <th>名称</th>
                                                            <th>备注</th>
                                                            <th>操作</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </section>
                                        </fieldset>
                                        <footer>
                                            <button type="submit" class="btn btn-primary">修改</button>
                                        </footer>
                                    </form>

                                    <!--/ Success states for elements -->

                                </div>
                                <!-- end widget content -->

                            </div>
                            <!-- end widget div -->

                        </div>
                    </article>
                    <article class="col-xs-12 col-sm-6 col-md-6 col-lg-6 sortable-grid ui-sortable" style="padding-left: 2px !important;">
                        <div class="jarviswidget jarviswidget-sortable"
                            data-widget-editbutton="false">
                            <header>
                                <span class="widget-icon"><i class="fa fa-table"></i></span>
                                <h2>数据表的字段信息</h2>
                            </header>
                            <!-- widget div-->
                            <div>
                                <!-- end widget edit box -->
                                <!-- widget content -->
                                <div class="widget-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered  table-hover smart-form"
                                            id="table-datatable">
                                            <thead>
                                                <tr>
                                                    <th>数据列名称</th>
                                                    <th>数据列类型</th>
                                                    <th>数据列长度</th>
                                                    <th>数据源列名称</th>
                                                    <th>数据源列类型</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>加载中...</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                                <!-- end widget content -->

                            </div>
                            <!-- end widget div -->

                        </div>
                    </article>
                </div>
            </section>
        </div>
        <!-- END MAIN CONTENT -->
    </div>

    <!-- END #MAIN CONTENT -->

    <!--================================================== -->

    <!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>-->


    <!-- #PLUGINS -->
    <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->


    <script src="js/libs/jquery-2.1.1.min.js"></script>
    <script src="js/libs/jquery-ui-1.10.3.min.js"></script>
    <!-- BOOTSTRAP JS -->
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <!-- IMPORTANT: APP CONFIG -->
    <script src="js/app.config.js"></script>


    <!-- CUSTOM NOTIFICATION -->
    <script src="js/notification/SmartNotification.min.js"></script>

    <!-- JARVIS WIDGETS -->
    <script src="js/smartwidgets/jarvis.widget.min.js"></script>


    <!-- SPARKLINES -->
    <script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

    <!-- JQUERY MASKED INPUT -->
    <script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>


    <!-- JQUERY UI + Bootstrap Slider -->
    <script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

    <script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>
    <script src="js/plugin/jquery-validate/jquery.metadata.js"></script>
    <script src="js/plugin/jquery-validate/messages_cn.js"></script>


    <script src="js/app.min.js"></script>
    <script src="appjs/Common.js"></script>
    <script src="appjs/Helper.js"></script>
    <script type="text/javascript">
        var table, table1;
        var draw = 0;
        var draw1 = 0;
        var AssemblyId = "";
        var Id = GetQueryString("Id");
        $(function () {
            GetInfo();
            GetDataTableInfo();
            $(".ServiceType").change(function () {
                var id = $(this).attr("data-type");
                $(".serviceoption").hide();
                $(".optioninput").removeClass("required");
                $("." + id + "input").addClass("required");
                $("#ServiceTypeInput").val($(this).val());
                if (id != "") {
                    $("#" + id).show();
                }
            });
            $("#Update-Form").validate({
                submitHandler: function (form) {
                    var condition = "";
                    console.log($("#ServiceTypeInput").val());
                    var parameters = "";
                    switch (parseInt($("#ServiceTypeInput").val())) {
                        case 1:
                            condition = $("#ScriptVal").val();
                            break;
                        case 3:
                            condition = $("#ProcVal").val();
                            var trlist = $("#table-parameters tbody tr");
                            if (trlist.length > 0) {
                                for (var i = 0; i < trlist.length; i++) {
                                    var tempjson = JSON.parse($(trlist[i]).attr("data"));
                                    parameters += (tempjson.Name + ",");
                                    parameters += (tempjson.Value);
                                    if (i != (trlist.length - 1)) {
                                        parameters += ",";
                                    }
                                }
                            } else {
                                ShowGritter("参数列表不允许为空！");
                                return;
                            }
                            break;
                        case 2:
                            condition = $("#Condition").val();
                            break;
                    }
                    $.ajax({
                        url: apiUrl,
                        data: {
                            "sys:sno": "DVR",
                            "sys:act": "Update",
                            "Condition": condition,
                            "Type": $("#ServiceTypeInput").val(),
                            "Caption": $("#Caption").val(),
                            "Id": Id,
                            "ParameterSettings": parameters
                        },
                        type: "Post",
                        dataType: "json",
                        success: function (data) {
                            if (data.IsSccuess) {
                                ShowGritter("编辑成功", 2, "DataApprovalRuleManagement.html");
                            } else {
                                if (IsLogined(data.ErrorCode)) {
                                    alert("失败（" + "错误代码：" + data.ErrorCode + "，错误信息：" + data.Message + ")");
                                }
                            }
                        },
                        beforeSend: function () {
                            ShowGritter("提交中");
                        }
                    });
                }
            });
            var initializationDataTableForAssembly = function () {
                $('#table-assembly').dataTable({
                    "autoWidth": true,
                    "oLanguage": dataTableConfig,
                    "bLengthChange": false,
                    ordering: false,
                    bProcessing: true,
                    bStateSave: true,
                    serverSide: true,
                    searching: false,
                    aLengthMenu: [25],
                    "ajax": {
                        url: apiUrl,
                        "dataSrc": function (json) {
                            if (json.IsSccuess) {
                                var newjson = new Array();
                                for (var i = 0; i < json.Data.Items.length; i++) {
                                    var editstr = "";
                                    editstr += "<a href=\"javascript:void(0);\" onclick=\"UpdateDateResult(this)\" data-Id=\"" + json.Data.Items[i].Id;
                                    editstr += "\"><i class=\"fa fa-hand-o-right\"></i>查看</a>";
                                    newjson.push({ "name": json.Data.Items[i].Assembly, "version": json.Data.Items[i].Version, "option": editstr });
                                }


                                return newjson;
                            } else {
                                if (IsLogined(json.ErrorCode)) {
                                    alert("失败（" + "错误代码：" + json.ErrorCode + "，错误信息：" + json.Message + ")");
                                }
                            }
                            return [];
                        },
                        "data": function (d) {
                            draw = d.draw;
                            return $.extend({}, { "sys:sno": "ETL" }, { "sys:act": "GetDataTableList" }, { "draw": d.draw }, { "length": d.length }, { "Page": parseInt(d.start / d.length) });
                        }
                    },
                    columns: [
                        { data: 'name' },
                        { data: 'version' },
                        { data: 'option' }
                    ]
                });
            }
            $("#AddModelForm").validate({
                submitHandler: function (form) {
                    var data = {};
                    data.Name = $("#add-Name").val();
                    data.Value = $("#add-Value").val();
                    $("#table-parameters").append(AssembleParameterData(data));
                    $("#AddModel").modal("hide");
                    ShowGritter("新增成功！");
                }
            });

        });

        //组合数据
        var AppadParameterData = function (data) {
            var trs = "";
            for (var i = 0; i < data.length; i++) {
                var $this = data[i];
                trs += AssembleParameterData({ Name: $this.Name, Value: $this.Value });
            }
            return trs;
        }
        //传入data对象返回一行的表格数据
        var AssembleParameterData = function (data) {
            var tr = "";
            tr += ("<tr data='" + JSON.stringify(data) + "'>");
            tr += "<td>" + data.Name + "</td>";
            tr += "<td>" + data.Value + "</td>";
            tr += "<td><a href='javascript:void(0)' onclick=\"DeleteData(this)\"><i class='fa  fa-times-circle'></i>删除</a></td>";
            tr += ("</tr>");
            return tr;
        }
        //删除当前行数据
        var DeleteData = function (obj) {
            if (confirm("是否删除？")) {
                $(obj).parent().parent().remove();
            }
        }
        var SetConditionVal = function (obj, val) {

            $("#Condition").val(val);
        }
        var UpdateDateResult = function (obj) {
            var dataid = $(obj).attr("data-Id");
            AssemblyId = dataid;
            if (draw1 == 0) {
                $("#plugin").show();
                initializationDataTableForPlugin();
            } else {
                table.fnDraw();
            }
        }

        //初始化表格
        var initializationDataTableForPlugin = function () {
            table = $('#table-plugin').dataTable({
                "autoWidth": true,
                "oLanguage": dataTableConfig,
                "bLengthChange": false,
                ordering: false,
                bProcessing: true,
                bStateSave: true,
                serverSide: true,
                searching: false,
                aLengthMenu: [25],
                "ajax": {
                    url: apiUrl,
                    "dataSrc": function (json) {
                        if (json.IsSccuess) {
                            var newjson = new Array();
                            for (var i = 0; i < json.Data.Items.length; i++) {
                                var editstr = "";
                                if (i == 0) {
                                    editstr += ("<input type=\"radio\" cheked='cheked' onclick=\"SelectPlugin(this,'" + json.Data.Items[i].Id + "')\"/>");
                                } else {
                                    editstr += ("<input type=\"radio\"  onclick=\"SelectPlugin(this,'" + json.Data.Items[i].Id + "')\"/>");
                                }
                                newjson.push({ "name": json.Data.Items[i].Name, "code": json.Data.Items[i].Description, "option": editstr });
                            }
                            var tempjson = { "draw": draw1, "recordsTotal": json.Data.Total, "data": newjson };

                            return newjson;
                        } else {
                            if (IsLogined(json.ErrorCode)) {
                                alert("失败（" + "错误代码：" + json.ErrorCode + "，错误信息：" + json.Message + ")");
                            }
                        }
                        return [];
                    },
                    "data": function (d) {
                        draw1 = d.draw;
                        return $.extend({}, { "sys:sno": "DVPLUGIN" }, { "sys:act": "GetPlugInList" }, { "AssemblyId ": AssemblyId }, { "draw": d.draw }, { "length": d.length }, { "Page": parseInt(d.start / d.length) });
                    }
                },
                columns: [
                    { data: 'name' },
                    { data: 'type' },
                    { data: 'option' }

                ]
            });
        }
        var GetInfo = function () {
            $.ajax({
                url: apiUrl,
                data: {
                    "sys:sno": "Dvr",
                    "sys:act": "Get",
                    "Id": Id
                },
                dataType: "json",
                success: function (data) {
                    if (data.IsSccuess) {
                        $("#Caption").val(data.Data.Caption);
                        $("#ServiceTypeInput").val(data.Data.Type);

                        switch (data.Data.Type) {
                            case 1:
                                $("#ScriptVal").val(data.Data.Condition);
                                $(".ServiceType[data-type='Script']").attr("checked", "checked");
                                $("#Script").show();
                                break;
                            case 3:
                                $("#ProcVal").val(data.Data.Condition);
                                $(".ServiceType[data-type='Proc']").attr("checked", "checked");
                                $("#table-parameters tbody").html(AppadParameterData(data.Data.Parameters));
                                $("#Proc").show();
                                break;
                            case 2:
                                $("#Condition").val(data.Data.Condition);
                                GetPlugIn(data.Data.Condition);
                                $(".ServiceType[data-type='PlugIn']").attr("checked", "checked");
                                $("#PlugIn").show();
                                break;
                        }
                    } else {
                        if (IsLogined(data.ErrorCode)) {
                            alert("错误代码：" + data.ErrorCode + "，错误信息：" + data.Message);
                        }
                    }
                },
                error: function () {
                    alert("系统异常，请稍后重试");
                }
            });
        }
        var GetPlugIn = function (id) {
            $.ajax({
                url: apiUrl,
                data: {
                    "sys:sno": "DVPLUGIN",
                    "sys:act": "GetPlugIn",
                    "Id": id
                },
                dataType: "json",
                success: function (data) {
                    if (data.IsSccuess) {
                        var tr = "<tr>";
                        tr += ("<td>" + data.Data.Name + "</td>");
                        tr += ("<td>" + data.Data.Version + "</td>");
                        tr += ("<td>" + data.Data.Description + "</td>");
                        tr += "</tr>";
                        $("#table-assembly tbody").html(tr);
                    } else {
                        if (IsLogined(data.ErrorCode)) {
                            alert("错误代码：" + data.ErrorCode + "，错误信息：" + data.Message);
                        }
                    }
                },
                error: function () {
                    alert("系统异常，请稍后重试");
                }
            });
        }

        var GetDataTableInfo = function () {
            $.ajax({
                url: apiUrl,
                data: {
                    "sys:sno": "DataTable",
                    "sys:act": "GetColumns",
                    "DataTableId": GetQueryString("dataTableId"),
                },
                dataType: "json",
                success: function (data) {
                    if (data.IsSccuess) {
                        //alert(AssembleData(data.Data.Columns));
                        $("#table-datatable tbody").html(AssembleData(data.Data.Columns));
                    } else {
                        if (IsLogined(data.ErrorCode)) {
                            alert("失败（" + "错误代码：" + data.ErrorCode + "，错误信息：" + data.Message + ")");
                        }
                    }
                }
            });
        }
        //传入data对象返回一行的表格数据
        var AssembleData = function (data) {
            var tr = "";
            for (var i = 0; i < data.length; i++) {
                tr += ("<tr data='" + JSON.stringify({ database: data[i], column: {} }) + "'>");
                tr += "<td>" + data[i].Name + "</td>";
                tr += "<td>" + data[i].Type + "</td>";
                tr += "<td>" + data[i].Length + "</td>";
                tr += "<td>" + data[i].MappingColumnName + "</td>";
                tr += "<td>" + data[i].MappingColumnType + "</td>";
                tr += ("</tr>");
            }
            return tr;
        }
        var AddData = function () {
            document.getElementById("AddModelForm").reset();
            $("#AddModel").modal("show");
        }
    </script>
    <div aria-hidden="true" aria-labelledby="remoteModalLabel" role="dialog" tabindex="-1" id="AddModel"
        class="modal fade" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                        ×
                    </button>
                    <h4 class="modal-title">新增</h4>
                </div>
                <div class="modal-body no-padding">
                    <form class="smart-form" id="AddModelForm" action="">
                        <fieldset>

                            <section>
                                <label class="label">
                                    名称
                                </label>
                                <label class="input">
                                    <input type="text" class="required " name="Name" id="add-Name" />
                                </label>
                            </section>
                            <section>
                                <label class="label">列</label>
                                <label class="input">
                                    <input type="text" class="required" name="Value" id="add-Value" />
                                </label>
                            </section>
                        </fieldset>
                        <footer>
                            <button class="btn btn-primary" type="submit">
                                提交
                            </button>
                            <button data-dismiss="modal" class="btn btn-default" type="button">
                                取消
                            </button>
                        </footer>

                    </form>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
